<template>
  <div class="hv-visual-property-sub-row" v-if="slots.title || slots.content">
    <div :class="['hv-visual-property-sub-col', ...colClassList]">
      <div class="hv-visual-property-sub-col-title" v-if="slots.title">
        <slot name="title"></slot>
      </div>
      <slot name="content" v-if="slots.content"></slot>
    </div>
  </div>

  <div
    class="hv-visual-property-sub-row"
    v-if="slots.leftTitle || slots.leftContent || slots.rightTitle || slots.rightContent"
  >
    <div class="hv-visual-property-sub-between-col">
      <div :class="['hv-visual-property-sub-between-col-left', ...leftColClassList]">
        <div class="hv-visual-property-sub-between-col-title" v-if="slots.leftTitle">
          <slot name="leftTitle"></slot>
        </div>
        <slot name="leftContent" v-if="slots.leftContent"></slot>
      </div>
      <div :class="['hv-visual-property-sub-between-col-right', ...rightColClassList]">
        <div class="hv-visual-property-sub-between-col-title" v-if="slots.rightTitle">
          <slot name="rightTitle"></slot>
        </div>
        <slot name="rightContent" v-if="slots.rightContent"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useSlots, type PropType } from "vue";

defineProps({
  colClassList: {
    type: Array as PropType<String[]>,
    default: () => [],
  },
  rightColClassList: {
    type: Array as PropType<String[]>,
    default: () => [],
  },
  leftColClassList: {
    type: Array as PropType<String[]>,
    default: () => [],
  },
});

const slots = useSlots();
</script>
